<template>
  <div>
    <div class="header">
      <div class="title"><text>教师管理</text></div>
      <!-- <el-form> -->
        <el-button type="primary" style="margin-left:20px;" size="mini" class="icon el-icon-circle-plus-outline"
          @click="dialogFormVisible=true">添加教师</el-button>
        <input type="text" v-model="queryinfo.name" placeholder=" 输入教室"
          style="margin-left: 20px; background-color: rgb(233, 237, 240); border: 1px solid #999; border-right:none; height: 28px;">
        <button class="el-icon-search"
          style="border: 1px solid #999; border-left: none; height: 30px; width: 40px;" @click="teacherlist"></button>
      <!-- </el-form> -->
    </div>
    <!-- 内容区域-列表 -->
    <el-card class="box-card">
        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="教师名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="type"
        label="教师类别"
        width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            @click="updates(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deletete(scope.row)"
           >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="queryinfo.page"
    :page-sizes="[1, 3, 4, 5]"
    :page-size="queryinfo.psize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
    </el-card>
    <!-- 添加 -->
    <el-dialog title="添加教师" v-model="dialogFormVisible">
      <el-form :label-position="labelPosition" size="mini" ref="formteacher" :model="form">
        <div class="boss" style="display: flex;">
              <div class="zuo" style="width:80%;">
                <el-form-item label="教师名称">
                  <el-input v-model="addform.name" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input  v-model="addform.tel" style="width:70%; margin-left: 4%;"></el-input>
                </el-form-item>
                <el-form-item label="微信号">
                  <el-input  v-model="addform.wechat" style="width:70%; margin-left: 4%;"></el-input>
                </el-form-item>
                <el-form-item label="教师类型"  prop="type">
                  <el-checkbox-group  v-model="type" style="margin-right: 17%;">
                    <el-checkbox  label="主讲老师" name="type"></el-checkbox>
                    <el-checkbox label="助教老师" name="type"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-upload
                class="upload-demo"
                drag
                action="http://www.eshareedu.cn/edusystems/api/upload/add"
                :on-success="postfile"
                multiple>
                <i class="el-icon-upload" style="width: 50px; height: 50px"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <template #tip>
                  <div class="el-upload__tip">
                    只能上传 jpg/png 文件，且不超过 500kb
                  </div>
                </template>
              </el-upload>
              </div>
              <div class="you" style="width:20%;">
               
              </div>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="insert('formteacher')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 更新 -->
    <el-dialog title="更新教师" v-model="dialogFormVisibleupdate">
      <el-form :label-position="labelPosition" size="mini" ref="formteacher" :model="update">
        <div class="boss" style="display: flex;">
              <div class="zuo" style="width:80%;">
                <el-form-item label="教师名称">
                  <el-input v-model="update.name" style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input  v-model="update.tel" style="width:70%; margin-left: 4%;"></el-input>
                </el-form-item>
                <el-form-item label="微信号">
                  <el-input  v-model="update.wechat" style="width:70%; margin-left: 4%;"></el-input>
                </el-form-item>
                <el-form-item label="教师类型"  prop="type">
                  <el-checkbox-group  v-model="type" style="margin-right: 17%;">
                    <el-checkbox  label="主讲老师" name="type"></el-checkbox>
                    <el-checkbox label="助教老师" name="type"></el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </div>
              <div class="you" style="width:20%;">
               
              </div>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
          <el-button type="primary" @click="updatex('formteacher')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
   export default {
       data(){
           return{
            tableData: [],
            labelPosition:'right',
            dialogFormVisible:false,
            dialogFormVisibleupdate:false,
            queryinfo:{
              page:1,
              psize:3,
              name:''
            },
            total:0,
            add:{
               cat:'0',
               name:'',
            },
            update:{
             id:'',
             name:'',
             tel:'',
             wechat:'',
             type:'',
            },
            type:["主讲老师"],
            addform:{
              type:''
            }

           }
       },
       created(){
             this.teacherlist()
           },
         
       methods:{
        //  更新
        updates(row){
            // console.log(row)
            this.dialogFormVisibleupdate=true
            this.update.id=row.id
            this.tableData.forEach(item=>{
              // console.log(item)
              if(row.id==item.id){
                this.update.name=item.name
                this.update.tel=item.tel
                this.update.wechat=item.wechat
                this.update.type=item.type
              }
            })           
 
        },
        async updatex(){
            const {data:res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/teachers/add',{params:this.update})
            // console.log(res)
            if(res.errCode==10000){
              this.$message.success('更新成功')
              this.dialogFormVisibleupdate=false
              this.teacherlist()
            }else{
              this.$message.success('更新失败')
            }
            
        },

        // 分页
         handleSizeChange(val) {
           this.queryinfo.psize=val
           this.teacherlist()
        //  console.log(`每页 ${val} 条`);
          },
         handleCurrentChange(val) {
          this.queryinfo.page=val
          this.teacherlist()
        //  console.log(`当前页: ${val}`);
          },
        // 添加
       async insert(){
           let typea = this.type.join(",")
           this.addform.type=typea
           const {data:res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/teachers/add',this.addform)
          //  console.log(res)
          if(res.errCode==10000){
            this.$message.success('添加成功')
            this.dialogFormVisible=false
            this.teacherlist()
          }else{
            this.$message.error('添加失败')
          }
        },
        
        //  文件上传
        postfile(res){
          console.log(res)
        },        
        //  删除
        async deletete(row){
       const cate = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(error => {
           return error
        });
        // console.log(cate)
        if(cate=='confirm'){
          const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/teachers/delete',{params:{id:row.id}})
          // console.log(res)
          this.$message.success('删除成功')
          this.teacherlist()
        }else{
          this.$message.info('以取消删除')
        }

        },
        //  列表
        async teacherlist(){
            const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/teachers/list?cat=0',{params:this.queryinfo})
            this.tableData=res.data.list
            this.total=res.data.counts
        },
        
       },
   }
</script>
<style scoped>
  .header {
    width: 100%;
    display: flex;
    height: 50px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 1px 1px 3px 1px rgb(200, 226, 241);
    background-color: rgb(233, 237, 240);
    align-items: center;
  }

  .title {
    width: 100px;
    height: 100%;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: rgb(198, 219, 243);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    font-weight: bold;
  }
.box-card{
    margin-top: 10px;
}
</style>
